<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE-按键修饰符</title>
<!--    导入vue的库文件 在 window 全局就有了 Vue 这个构造函数-->
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<!--    希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部-->
<div id="app">
<!--      //按ESC键 清空输入框内容    按enter键发起ajax请求-->
<input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
</div>

<script>
    //创建vue的实例对象
    const vm = new Vue({
    // el 属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
        el:'#app',
        // data 对象就是要渲染到页面上的数据
        data:{},
        methods:{
            clearInput(e){
                console.log("触发了 clearInput 方法")
                //按ESC键 清空输入框内容
                e.target.value=''
            },
            commitAjax(){
                console.log("触发了  commitAjax 方法")
            }
        },

    });
</script>
</body>
</html>